<template>
  <div>
    <van-sticky :offset-top="1">
      <header id="header" class="aui-bar aui-bar-nav">
          <a class="aui-pull-left" @click="back">
              <span class="iconfont icon-fanhui"></span>
          </a>
          <div class="aui-title">试用详情</div>
          <a class="aui-pull-right" @click="fnOpenRecord">
            操作记录
          </a>
      </header>
    </van-sticky>
    <div class="sy_detail">
      <div>
          <div id="super_product">
              <div class="good_t aui-bg-f van-hairline--bottom">
                  <van-row>
                      <van-col span="8">
                          <div class="good-img"  v-bind:style="{backgroundImage:'url(' + good.image + ')'}" @click="fnPreview(good.image)"></div>
                      </van-col>
                      <van-col span="16" class="good_cont aui-padded-l-15">
                          <van-row class="name">
							  <van-col span="2">
								  <img src="../../assets/tb_icon.png" alt="" v-if="good.downtype == 1">
								  <img src="../../assets/tm_icon.png" alt="" v-if="good.downtype == 2">
								  <img src="../../assets/jd_icon.png" alt="" v-if="good.downtype == 3">
								  <img src="../../assets/pdd_icon.png" alt="" v-if="good.downtype == 4">
								  <img src="../../assets/al_icon.png" alt="" v-if="good.downtype == 5">
								  <img src="../../assets/dou_icon.png" alt="" v-if="good.downtype == 6">
								  <img src="../../assets/kuai_icon.png" alt="" v-if="good.downtype == 7">
							  </van-col>

                              <van-col span="22" class="aui-text-7 aui-ftn14 aui-padded-l-5 van-multi-ellipsis--l2" v-text="good.name"></van-col>
                          </van-row>
                          <van-row class="item aui-text-7 aui-ftn12 aui-padded-t-5">
                              <van-col span="8">下单金额:</van-col>
                              <van-col span="16">￥{{good.price}}</van-col>
                          </van-row>
                          <van-row class="item aui-row aui-text-7 aui-ftn12 aui-padded-t-5">
                              <van-col span="8">返还金额:</van-col>
                              <van-col span="16">￥{{good.back_price}}</van-col>
                          </van-row>
                          <van-row class="item aui-row aui-text-7 aui-ftn12 aui-padded-t-5">
                              <van-col span="8">试用ID:</van-col>
                              <van-col span="16" v-text="good.id"></van-col>
                          </van-row>
                          <div class="sq_btn passed aui-text-red aui-text-center aui-ftn12 aui-margin-t-10" v-if="good.status == 4 || good.status == 2 || good.status == 10" v-text="good.statusname" v-cloak></div>
                          <div class="sq_btn aui-text-7 aui-text-center aui-ftn12 aui-margin-t-10" v-else v-text="good.statusname" v-cloak></div>
                      </van-col>
                  </van-row>
                  <div class="tag aui-ftn12 aui-text-red aui-padded-t-10" v-if="good.status == 1 || good.status == 3 || good.status == 2 || good.status == 5" v-cloak>
                  <div v-if="good.status == 1">
                      等待商家审核申请!
                      <span><van-count-down :time="good.exittime*1000" format="DD 天 HH 时 mm 分 ss 秒" @finish="init"/></span>未审核将自动失效
                  </div>
                  <div v-if="good.status == 2">
                      请购买并填写订单号!
                      <span><van-count-down :time="good.exittime*1000" format="DD 天 HH 时 mm 分 ss 秒"  @finish="init"/></span>未填写将自动过期
                  </div>
                  <div v-if="good.status == 3">
                      待商家审核订单号!
                      <span><van-count-down :time="good.exittime*1000" format="DD 天 HH 时 mm 分 ss 秒" @finish="init"/></span>未审核将自动通过
                  </div>
                  <div v-if="good.status == 5">
                      等待商家返款!
                      <span><van-count-down :time="good.exittime*1000" format="DD 天 HH 时 mm 分 ss 秒" @finish="init"/></span>未操作将自动返款
                  </div>
                  </div>
                  <div class="tag aui-ftn12 aui-text-red aui-padded-t-10" v-if="good.status == 8" v-cloak>您长时间没有参加该试用，已过期！</div>
                  <div class="tag aui-ftn12 aui-text-red aui-padded-t-10" v-if="good.status == 7" v-cloak>不允许参加试用</div>
                  <div class="tag aui-ftn12 aui-text-red aui-padded-t-10" v-if="good.status == 9" v-cloak>商家审核订单号无效，请去退款！</div>
              </div>
              <!-- 已确认收货 -->
              <div class="aui-bg-f" v-if="good.status == 5" v-cloak>
                  <div class="item aui-ftn12 aui-padded-t-10 aui-padded-b-10 aui-padded-l-15 van-hairline--bottom">
                      <span class="aui-text-7 aui-padded-r-5">订单号:</span>
                      <span class="aui-text-7 aui-padded-r-5" v-text="good.ordernum"></span>
                      <div class="aui-btn aui-btn-warning aui-text-f aui-text-center aui-ftn12" id="ordernum" data-clipboard-action="copy" :data-clipboard-text="good.ordernum"  @click="fnCopyText('#ordernum')">复制</div>
                  </div>
                  <div class=" van-hairline--bottom aui-padded-10">
                      <div class="aui-ftn12 aui-padded-b-10">
                          <span class="aui-text-7 aui-padded-r-10">收货和评价截图</span>
                          <span class="aui-text-red" @click="comment.show = true" v-cloak>[修改]</span>
                      </div>
                      <van-row>
                          <van-col span="6" class="img-list">
                              <div class="img"  v-bind:style="{backgroundImage:'url(' + good.bao_image + ')'}" v-lazy="good.bao_image"  @click="fnPreview(good.bao_image)"></div>
                          </van-col>
                          <van-col span="6" class="img-list">
                              <div class="img"  v-bind:style="{backgroundImage:'url(' + good.comment_image + ')'}" v-lazy="good.comment_image"  @click="fnPreview(good.comment_image)"></div>
                          </van-col>
                      </van-row>
                  </div>

                  <div class="item aui-ftn12 aui-padded-t-10 aui-padded-b-10 aui-padded-l-15">
                      <span class="aui-text-7 aui-padded-r-5">商家QQ:</span>
                      <span class="aui-text-7 aui-padded-r-5" v-text="good.qq"></span>
                      <div class="aui-btn aui-btn-warning aui-text-f aui-text-center aui-ftn12" id="qq" data-clipboard-action="copy" :data-clipboard-text="good.qq"  @click="fnCopyText('#qq')">复制</div>
                  </div>
              </div>
              <!-- <div class="aui-padded-10 aui-ftn12 aui-text-7 aui-bg-f" v-if="good.status == 2">
                  商家QQ: {{good.qq}}
                  <div class="aui-btn aui-btn-warning aui-text-f aui-text-center aui-ftn12" id="qq" data-clipboard-action="copy" :data-clipboard-text="good.qq"  @click="fnCopyText('#qq')">复制</div>
              </div> -->
              <div v-if="good.status != 8 && good.status != 7" v-cloak>
                  <!-- 已完成 -->
                  <div class="aui-bg-f" v-if="good.status == 6" v-cloak>
                      <div class="item aui-ftn12 aui-padded-t-10 aui-padded-b-10 aui-padded-l-15 aui-text-red van-hairline--bottom">已返款{{good.back_price}}元到您试用账户！
                      </div>
                      <div class="item van-hairline--bottom aui-ftn12 aui-padded-t-10 aui-padded-b-10 aui-padded-l-15">
                          <span class="aui-text-7 aui-padded-r-5">订单号:</span>
                          <span class="aui-text-7 aui-padded-r-5" v-text="good.ordernum" v-cloak></span>
                          <div class="aui-btn aui-btn-warning aui-text-f aui-text-center aui-ftn12" id="ordernum" data-clipboard-action="copy" :data-clipboard-text="good.ordernum"  @click="fnCopyText('#ordernum')">复制</div>
                      </div>
                     <div class="item van-hairline--bottom aui-ftn14 aui-padded-t-10 aui-padded-b-10 aui-padded-l-15">
                          <span class="aui-text-7 aui-padded-r-5">收货和评价截图 </span>
                          <van-row class="aui-padded-t-10">
                              <van-col span="6" class="img-list" @click="fnPreview(good.bao_image)">
								<img :src="good.bao_image" alt="" style="width: 90px!important;height: 140px!important;">
                              </van-col>
                              <van-col span="6" class="img-list"  @click="fnPreview(good.comment_image)">
								  <img :src="good.comment_image" alt="" style="width: 90px!important;height: 140px!important;">
                              </van-col>
                          </van-row>
                      </div>
                  </div>
                  <!-- 订单号无效 -->
                  <div class="aui-bg-f aui-margin-b-5" v-if="good.status == 9" v-cloak>
                      <div class="item aui-bg-f aui-ftn12 aui-padded-t-10 aui-padded-b-10 aui-padded-l-15">
                          <span class="aui-text-7 aui-padded-r-5">订单号:</span>
                          <span class="aui-text-7 aui-padded-r-5" v-text="good.ordernum" v-cloak></span>
                          <div class="aui-btn aui-btn-warning aui-text-f aui-text-center aui-ftn12" id="ordernum" data-clipboard-action="copy" :data-clipboard-text="good.ordernum"  @click="fnCopyText('#ordernum')">复制</div>
                      </div>
                      <!-- 订单号无效 -->
                      <div class="item aui-ftn12 aui-padded-t-10 aui-padded-b-10 aui-padded-l-15 aui-text-7 aui-border-t">
                          <div class="aui-padded-b-10">
                              商家审核单号无效
                          </div>
                          <div class="aui-padded-b-10">
                              审核时间：{{good.invalidtime}}
                          </div>
                          <div class="aui-text-red">理由：{{good.wrongwarn ? good.wrongwarn : '无'}}</div>
                      </div>
                  </div>
                  <div class="list aui-bg-f aui-padded-10 aui-ftn14 aui-margin-t-10 van-hairline--bottom">
                      <span class="aui-text-7">平台:</span>
                      <span class="aui-text-red" v-text="good.downtype_name"></span>
                      <span class="aui-text-7">,下单帐号:</span>
                      <span class="aui-text-red" v-text="good.buynum"></span>
                  </div>
                  <!-- 已通过 || 订单号无效 -->
                  <div class="list aui-bg-f aui-padded-10" v-if="good.status == 6 || good.status == 9" v-cloak>
                      <div class="aui-ftn14 aui-text-7">商品图片</div>
                      <van-row class="aui-padded-t-10">
                          <van-col span="12">
                              <div class="good-img"  v-bind:style="{backgroundImage:'url(' + good.goods_image + ')'}" v-lazy="good.goods_image" @click="fnPreview(good.goods_image)"></div>
                          </van-col>
                      </van-row>
                  </div>
                  <!-- 通过的订单 -->
                  <div class="aui-bg-f aui-padded-15 pj" v-if="good.status == 4 || good.status == 10 || good.status == 5" v-cloak>
                      <div class="aui-text-red aui-text-center aui-font-weight aui-ftn16 aui-padded-t-10">第一步：请填写试用评价!  </div>
                      <div class="aui-padded-t-10" v-if="good.zhi_ping" v-cloak>
                          <div class="aui-text-red aui-ftn12 aui-padded-b-10">商家指定评价</div>
                          <div class="input">
                              <van-row>
                                  <van-col span="20">
                                      <input type="text" name="pj" v-model="good.zhi_ping" class="aui-ftn12">
                                  </van-col>
                                  <van-col span="4">
                                    <div class="btn aui-bg-red aui-text-f aui-text-center aui-ftn12" id="zhi_ping" data-clipboard-action="copy" :data-clipboard-text="good.zhi_ping"  @click="fnCopyText('#zhi_ping')">复制</div>
                                  </van-col>
                              </van-row>
                          </div>
                      </div>
                      <div class="aui-padded-t-10" v-if="good.zhi_pingurl" v-cloak>
                          <div class="aui-text-red aui-ftn12 aui-padded-b-10">商家指定晒图</div>
                          <van-row>
                              <van-col span="6" class="img-list" v-for="(item, index) in good.zhi_pingurl" :key="index">
                                  <div class="img"  v-bind:style="{backgroundImage:'url(' + item + ')'}" v-lazy="item" @click="fnPreview(good.zhi_pingurl)"></div>
                              </van-col>
                          </van-row>
                      </div>
                  </div>
                  <!-- 审核通过,通过的订单 -->
                  <div class="aui-bg-f" v-if="good.status == 3 || good.status == 4 || good.status == 10" v-cloak>
                      <div class="item van-hairline--bottom aui-ftn12 aui-padded-t-10 aui-padded-b-10 aui-padded-l-15" v-if="good.status == 3 || good.status == 4 || good.status == 10" v-cloak>
                          <span class="aui-text-7 aui-padded-r-5">订单号:</span>
                          <span class="aui-text-7 aui-padded-r-5" v-text="good.ordernum" v-cloak></span>
                          <span class="aui-text-red aui-padded-r-10" @click="fnCheck(2)" v-if="good.status == 3" v-cloak>[修改]</span>
                          <div class="aui-btn aui-btn-warning aui-text-f aui-text-center aui-ftn12" id="ordernum" data-clipboard-action="copy" :data-clipboard-text="good.ordernum"  @click="fnCopyText('#ordernum')">复制</div>
                      </div>
                      <div class="item aui-ftn12 aui-padded-t-10 aui-padded-b-10 aui-padded-l-15" v-if="good.status == 4 || good.status == 10" v-cloak>
                          <span class="aui-text-7 aui-padded-r-5">商家QQ:</span>
                          <span class="aui-text-7 aui-padded-r-5" v-text="good.qq"></span>
                          <div class="aui-btn aui-btn-warning aui-text-f aui-text-center aui-ftn12" id="qq" data-clipboard-action="copy" :data-clipboard-text="good.qq"  @click="fnCopyText('#qq')">复制</div>
                      </div>
                      <!-- 被退回 -->
                      <div class="item van-hairline--bottom aui-ftn12 aui-padded-t-10 aui-padded-b-10 aui-padded-l-15 aui-text-7 aui-border-t" v-if="good.status == 10" v-cloak>
                          <div class="aui-padded-b-10">
                              商家退回了您提交的“确认收货评价”
                          </div>
                          <div class="aui-padded-b-10">
                              退回时间：{{good.returntime}}
                          </div>
                          <div class="aui-text-red">理由：{{good.backwarn ? good.backwarn : '无'}}</div>
                      </div>
                  </div>
                  <!-- 待审核 -->
                  <div class="no_sk aui-bg-f aui-ftn16 aui-text-7 aui-text-center aui-margin-t-10" v-if="good.status == 1" v-cloak>
                      审核通过后可查看下单步骤
                  </div>
                  <!-- 审核通过，通过的订单,驳回订单 -->
                  <div v-if="good.status == 2 || good.status == 3 || good.status == 4 || good.status == 5 || good.status == 10" v-cloak>
                      <div class="sk_pass aui-bg-f aui-margin-t-10 aui-padded-10">
                          <div class="title aui-text-7 aui-text-center aui-ftn16 aui-padded-t-10">下单步骤</div>
                          <div class="content aui-margin-t-15">
                          <!-- 不是电脑端 -->
                              <div class="item aui-padded-t-10 aui-padded-b-10 van-hairline--bottom" v-if="good.mode != 5" v-cloak>
                                  <van-row class="aui-ftn14">
                                      <van-col span="2" class="aui-text-7">
                                          1、
                                      </van-col>
                                      <van-col span="22" class="aui-text-red">
                                          打开{{good.downtype_name}}
                                      </van-col>
                                  </van-row>
                              </div>             
							  <div class="item aui-padded-t-10 aui-padded-b-10 van-hairline--bottom">
								<van-row class="aui-ftn14">
								  <van-col span="2" class="aui-text-7">
									  2、
								  </van-col>
								  <van-col span="22">
									  <div class="aui-text-7 aui-padded-b-5">搜索抖音号:<span class="aui-text-red" v-text="good.manager"></span>
									  <span class="aui-text-7 aui-padded-5 aui-ftn12">(请手动输入抖音号,不可复制)</span>
									  </div>
								  </van-col>
								</van-row>
                                </div>

                              <div class="item aui-padded-t-10 aui-padded-b-10 van-hairline--bottom">
                                  <van-row class="aui-ftn14">
                                      <van-col span="2" class="aui-text-7">
                                          3、
                                      </van-col>
                                      <van-col span="22">
                                          <span class="aui-text-7">或者扫描我的二维码进入:</span>
                                          <van-row class="aui-padded-t-10">
                                              <van-col span="12">
                                                  <div class="good-img" v-lazy="good.store_qrcode" v-bind:style="{backgroundImage:'url(' + good.store_qrcode + ')'}" @click="fnPreview(good.store_qrcode)"></div>
                                              </van-col>
                                          </van-row>
                                      </van-col>
                                  </van-row>
                              </div>
							  
							   <div class="item aui-padded-t-10 aui-padded-b-10 van-hairline--bottom">
								    <van-row class="aui-ftn14">
								      <van-col span="2" class="aui-text-7">
								          <span>4</span>、
								      </van-col>
								      <van-col span="22">
								          <span class="aui-text-7">登录帐号:</span><span class="aui-text-red aui-padded-l-10" v-text="good.buynum"></span>
								      </van-col>
								    </van-row>
							    </div>
							  
								<div class="item aui-padded-t-10 aui-padded-b-10 van-hairline--bottom">
								  <van-row class="aui-ftn14">
									  <van-col span="2" class="aui-text-7">
										  <span>5</span>、
									  </van-col>
									  <van-col span="22">
										  <span class="aui-text-7">直播时间:</span><span class="aui-text-red aui-padded-l-10" v-text="good.botime"></span>
									  </van-col>
								  </van-row>
								</div>

                              <div class="item aui-padded-t-10 aui-padded-b-10 van-hairline--bottom">
                                  <van-row class="aui-ftn14">
                                      <van-col span="2" class="aui-text-7">
                                          <span>6</span>、
                                      </van-col>
                                      <van-col span="22">
                                          <span class="aui-text-7">核对店铺名:</span><span class="aui-text-red aui-padded-l-10" v-text="good.storename"></span>
                                          <div class="aui-ftn12 aui-text-red aui-padded-t-5">    下单前请核对店铺名，防止误购其它店铺商品！
                                          </div>
                                      </van-col>
                                  </van-row>
                              </div>

                              <div class="item aui-padded-t-10 aui-padded-b-10 van-hairline--bottom">
                                  <van-row class="aui-ftn14">
                                      <van-col span="2" class="aui-text-7">
                                          <span>7</span>、
                                      </van-col>
                                      <van-col span="22">
                                          <span class="aui-text-7">核对视频封面或商品图片按￥{{good.price}}元购买:</span>
                                          <van-row class="aui-padded-t-10">
                                              <van-col span="12">
                                                  <div class="good-img" v-lazy="good.goods_image" v-bind:style="{backgroundImage:'url(' + good.goods_image + ')'}" @click="fnPreview(good.goods_image)"></div>
                                              </van-col>
                                          </van-row>
                                      </van-col>
                                  </van-row>
                              </div>
							  
							  <div class="item aui-padded-t-10 aui-padded-b-10">
							    <van-row class="aui-ftn14">
							  	  <van-col span="2" class="aui-text-7">
							  		  <span>8</span>、
							  	  </van-col>
							  	  <van-col span="22">
							  		  <span class="aui-text-7">发货地:</span><span class="aui-text-red aui-padded-l-10" v-text="good.address"></span>
							  	  </van-col>
							    </van-row>
							  </div>
                          </div>
                      </div>
                      <div class="sk_pass aui-bg-f aui-margin-t-10 aui-padded-10 aui-margin-b-15">
                          <div class="title aui-text-7 aui-text-center aui-ftn16 aui-padded-t-10">注意事项</div>
                          <div class="content aui-margin-t-15">
							  <div class="item aui-padded-t-10 aui-padded-b-10 van-hairline--bottom" v-if="good.is_guan == 1">
								<div class="aui-ftn14">
									<span class="aui-text-7">
										是否需要加入关注:
									</span>
									<span class="aui-padded-l-10 aui-text-red">
										需要
									</span>
									<van-row class="aui-padded-t-10">
										<van-col span="10" class="hbsj">
											<div class="aui-ftn12 aui-text-center aui-text-7 aui-padded-b-10">点击下面上传关注截图</div>
											<div class="img_cont aui-text-center" @click="comment.image_type = 'guan'">
											  <van-uploader :after-read="afterRead">
											    <span class="aui-ftn14 aui-text-7" v-if="!guan_image" v-cloak>关注截图</span>
											    <div class="img" v-else v-bind:style="{backgroundImage:'url(' + guan_image + ')'}" v-lazy="guan_image" v-cloak></div>
											  </van-uploader>
											</div>
											<div v-if=" good.guan_image"  @click="comment.image_type = 'guan'" v-cloak>
												<van-uploader :after-read="afterRead"  style="margin: auto">
												  <div class="aui-text-center aui-text-red aui-ftn12 aui-padded-10">修改关注截图</div>
												</van-uploader>
											</div>
										</van-col>
										<van-col span="10" class="hbsj">
											<div class="aui-ftn12 aui-text-center aui-text-7 aui-padded-b-10">【案例图】</div>
											<div class="img_cont aui-text-center" @click="fnPreview(guan_al, 0)">
											<div class="img" v-bind:style="{backgroundImage:'url(' + guan_al + ')'}" v-cloak></div>
											</div>
										</van-col>
									</van-row>
								</div>
								</div>
								<div class="item aui-padded-t-10 aui-padded-b-10 van-hairline--bottom" v-if="good.is_fen == 1">
									<div class="aui-ftn14">
										<span class="aui-text-7">
											是否需要加入粉丝团:
										</span>
										<span class="aui-padded-l-10 aui-text-red">
											需要
										</span>
										<van-row class="aui-padded-t-10">
											<van-col span="10" class="hbsj">
												<div class="aui-ftn12 aui-text-center aui-text-7 aui-padded-b-10">点击下面上传粉丝截图</div>
												<div class="img_cont aui-text-center" @click="comment.image_type = 'fen'">
												<van-uploader :after-read="afterRead">
												<span class="aui-ftn14 aui-text-7" v-if="!fen_image" v-cloak>粉丝截图</span>
												<div class="img" v-else v-bind:style="{backgroundImage:'url(' + fen_image + ')'}" v-lazy="fen_image" v-cloak></div>
												</van-uploader>
												</div>
												<div v-if=" good.fen_image"  @click="comment.image_type = 'fen'" v-cloak>
												<van-uploader :after-read="afterRead"  style="margin: auto">
												<div class="aui-text-center aui-text-red aui-ftn12 aui-padded-10">修改粉丝截图</div>
												</van-uploader>
												</div>
											</van-col>
											<van-col span="10" class="hbsj">
												<div class="aui-ftn12 aui-text-center aui-text-7 aui-padded-b-10">【案例图】</div>
												<div class="img_cont aui-text-center" @click="fnPreview(fen_al, 0)">
												<div class="img" v-bind:style="{backgroundImage:'url(' + fen_al + ')'}" v-cloak></div>
												</div>
											</van-col>
										</van-row>
									</div>
								</div>
								<div class="item aui-padded-t-10 aui-padded-b-10 van-hairline--bottom" v-if="good.timelook">
									<div class="aui-ftn14">
										<span class="aui-text-7">
											浏览时长:
										</span>
										<span class="aui-padded-l-10 aui-text-red">
											{{good.timelook}}秒
										</span>
										<van-row class="aui-padded-t-10">
											<van-col span="10" class="hbsj">
												<div class="aui-ftn12 aui-text-center aui-text-7 aui-padded-b-10">上传开始浏览截图</div>
												<div class="img_cont aui-text-center" @click="comment.image_type = 'look1'">
												<van-uploader :after-read="afterRead">
												<span class="aui-ftn14 aui-text-7" v-if="!look_image1" v-cloak>浏览截图</span>
												<div class="img" v-else v-bind:style="{backgroundImage:'url(' + look_image1 + ')'}" v-lazy="look_image1" v-cloak></div>
												</van-uploader>
												</div>
												<div v-if=" good.look_image1"  @click="comment.image_type = 'look1'" v-cloak>
												<van-uploader :after-read="afterRead"  style="margin: auto">
												<div class="aui-text-center aui-text-red aui-ftn12 aui-padded-10">修改浏览截图</div>
												</van-uploader>
												</div>
											</van-col>
											<van-col span="10" class="hbsj">
												<div class="aui-ftn12 aui-text-center aui-text-7 aui-padded-b-10">【案例图】</div>
												<div class="img_cont aui-text-center" @click="fnPreview(look_al1, 0)">
												<div class="img" v-bind:style="{backgroundImage:'url(' + look_al1 + ')'}" v-cloak></div>
												</div>
											</van-col>
										</van-row>
										<van-row class="aui-padded-t-10">
											<van-col span="10" class="hbsj">
												<div class="aui-ftn12 aui-text-center aui-text-7 aui-padded-b-10">上传结束浏览截图</div>
												<div class="img_cont aui-text-center" @click="comment.image_type = 'look2'">
												<van-uploader :after-read="afterRead">
												<span class="aui-ftn14 aui-text-7" v-if="!look_image2" v-cloak>浏览截图</span>
												<div class="img" v-else v-bind:style="{backgroundImage:'url(' + look_image2 + ')'}" v-lazy="look_image2" v-cloak></div>
												</van-uploader>
												</div>
												<div v-if=" good.look_image2"  @click="comment.image_type = 'look2'" v-cloak>
												<van-uploader :after-read="afterRead"  style="margin: auto">
												<div class="aui-text-center aui-text-red aui-ftn12 aui-padded-10">修改浏览截图</div>
												</van-uploader>
												</div>
											</van-col>
											<van-col span="10" class="hbsj">
												<div class="aui-ftn12 aui-text-center aui-text-7 aui-padded-b-10">【案例图】</div>
												<div class="img_cont aui-text-center" @click="fnPreview(look_al2, 0)">
												<div class="img" v-bind:style="{backgroundImage:'url(' + look_al2 + ')'}" v-cloak></div>
												</div>
											</van-col>
										</van-row>
									</div>
								</div>
								<div class="item aui-padded-t-10 aui-padded-b-10 van-hairline--bottom" v-if="good.is_share" v-cloak>
									<div class="aui-ftn14">
										<span class="aui-text-7">
											是否需要分享好友:
										</span>
										<span class="aui-padded-l-10 aui-text-red">
											需要
										</span>
									</div>
								</div>
								<div class="item aui-padded-t-10 aui-padded-b-10 van-hairline--bottom" v-if="good.is_chat" v-cloak>
									<div class="aui-ftn14">
										<span class="aui-text-7">
											是否需要聊天:
										</span>
										<span class="aui-padded-l-10 aui-text-red">
											需要
										</span>
									</div>
								</div>
                              <div class="item aui-padded-t-10 aui-padded-b-10 van-hairline--bottom" v-if="good.is_collect" v-cloak>
                                  <div class="aui-ftn14">
                                      <span class="aui-text-7">
                                          收藏宝贝:
                                      </span>
                                      <span class="aui-padded-l-10 aui-text-red">
                                          需要
                                      </span>
                                  </div>
                              </div>
                              <div class="item aui-padded-t-10 aui-padded-b-10 van-hairline--bottom" v-if="good.is_card" v-cloak>
                                  <div class="aui-ftn14">
                                      <span class="aui-text-7">
                                          加入购物车:
                                      </span>
                                      <span class="aui-padded-l-10 aui-text-red">
                                          需要
                                      </span>
                                  </div>
                              </div>
                              <div class="item aui-padded-t-10 aui-padded-b-10 van-hairline--bottom">
                                  <div class="aui-ftn14 aui-text-7">
                                      <span v-if="!good.is_card">允许</span><span v-if="good.is_card">禁止</span>信用卡支付  <span v-if="!good.is_hua">允许</span><span v-if="good.is_hua">禁止</span>花呗支付
                                  </div>
                              </div>
                              <div class="tags aui-padded-t-10 aui-padded-b-10 aui-ftn15 aui-text-red">
                                  <div class="tag_cont" v-html="good.content">
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
		  <div style="padding-bottom: 50px"></div>
          <div class="fixed aui-bg-f" style="bottom: 0" id="fixed">
              <!-- 待审核 -->
              <van-row class="content" v-if="good.status == 2" v-cloak>
                  <van-col span="12" style="background-color: #666;" @click="fnCancel">
                      <div class="aui-text-f aui-text-center">放弃资格</div>
                  </van-col>
                  <van-col span="12" @click="fnCheck(2)">
                      <div class="aui-text-f aui-bg-red aui-text-center">填写订单号</div>
                  </van-col>
              </van-row>
              <!-- 待填写订单号 -->
              <div class="content aui-bg-red aui-text-f aui-text-center" v-if="good.status == 1" v-cloak @click="fnCancel">
                  取消申请
              </div>
              <!-- 审核通过，通过的订单 -->
              <div class="content aui-bg-red aui-text-f aui-text-center" @click="comment.show = true" v-if="good.status == 4" v-cloak>
                  第二步：确认已收到货并提交了评价
              </div>
              <!-- 重新提交评价，被驳回订单 -->
              <div class="content aui-bg-red aui-text-f aui-text-center" @click="comment.show = true" v-if="good.status == 10" v-cloak>
                  订单被驳回请重新提交评价
              </div>
          </div>
      </div>
  </div>
  <!-- 核对店铺名或输入订单号 -->
  <van-dialog v-model="check.show" :title="check.title" @confirm="fnCheckConfirm" show-cancel-button>
    <div class="check aui-padded-15">
      <input type="text" v-model="check.input" :placeholder="check.name" class="aui-text-center aui-ftn14 aui-text-3">
    </div>
  </van-dialog>
  <!-- 评价 -->
  <van-popup v-model="comment.show">
    <div class="wrapper">
      <div class="sy_comment aui-bg-f">
        <div class="content">
            <van-row>
                <van-col span="12">
                    <div class="aui-ftn12 aui-text-center aui-text-7 aui-padded-b-10">点击下面上传包裹拍摄图</div>
                    <div class="img_cont aui-text-center" @click="comment.image_type = 'bag'">
                      <van-uploader :after-read="afterRead">
                        <span class="aui-ftn14 aui-text-7" v-if="!comment.bag_background" v-cloak>包裹截图</span>
                        <div class="img" v-else v-bind:style="{backgroundImage:'url(' + comment.bag_background + ')'}" v-lazy="comment.bag_background" v-cloak></div>
                      </van-uploader>
                    </div>
                    <div class="img_b aui-text-center aui-ftn12 aui-text-center aui-text-red aui-margin-t-15">
                        <span>【案例图】</span>
                        <div class="img" @click="fnPreview(comment.bag_img)" v-bind:style="{backgroundImage:'url(' + comment.bag_img + ')'}" v-lazy="comment.bag_img"></div>
                    </div>
                </van-col>
                <van-col span="12">
                    <div class="aui-ftn12 aui-text-center aui-text-7 aui-padded-b-10">点击下面上传评价截图</div>

                    <div class="img_cont aui-text-center" @click="comment.image_type = 'comment'">
                      <van-uploader :after-read="afterRead">
                        <span class="aui-ftn14 aui-text-7" v-if="!comment.comment_background" v-cloak>评价截图</span>
                        <div class="img" v-else v-bind:style="{backgroundImage:'url(' + comment.comment_background + ')'}" v-lazy="comment.comment_background" v-cloak></div>
                      </van-uploader>
                    </div>
                    <div class="img_b aui-text-center aui-ftn12 aui-text-center aui-text-red aui-margin-t-15">
                        <span>【案例图】</span>
                        <div class="img"  @click="fnPreview(comment.comment_img)" v-bind:style="{backgroundImage:'url(' + comment.comment_img + ')'}" v-lazy="comment.comment_img"></div>
                    </div>
                </van-col>
                <van-col span="24" class="tags aui-ftn12 aui-text-center aui-text-7" v-if="comment.time" v-cloak>
                    {{comment.time}}点后可确认提交，已在购买平台确认了收货并提交了评价后才可进行该操作，否则封号处理！
                </van-col>
            </van-row>
          </div>
          <van-row>
              <van-col span="12">
                  <div class="btn aui-bg-red aui-ftn16 aui-text-center aui-text-f" @click="fnConfirmComment">
                      确定
                  </div>
              </van-col>
              <van-col span="12">
                  <div class="btn close_btn aui-bg-f aui-ftn16 aui-text-center aui-text-7 aui-border-t" @click="comment.show = false">
                      关闭
                  </div>
              </van-col>
          </van-row>
        </div>
    </div>
  </van-popup>
  </div>
</template>

<script>
  import Record from '../../service/record.js'
  export default {
    data () {
      return {
        id: '',
        product: {
            time: '',
            bag_background: '',
            comment_background: '',
            comment_pics: ''
        },
        check: {title: '', input: '', show: false, name: ''},
        comment: {
          image_type: '',
          show: false,
          bag_background_file: '',
          comment_background_file: '',
          bag_background: '',
          comment_background: '',
          comment_img: '',
          bag_img: '',
          order_id: '',
          type: '',
          time: ''
        },
		guan_al: '',
		guan_image: '',
		guan_file: '',
		fen_al: '',
		fen_image: '',
		fen_file: '',
		look_al1: '',
		look_al2: '',
		look_image1: '',
		look_file1: '',
		look_image2: '',
		look_file2: '',
        good: {}//状态:1=待审核申请,2=待填订单号,3=待审核订单,4=通过的订单,5=已确认收货,6=已完成,7=不允许参加,8=过期未做单,9=订单号无效
      }
    },
    mounted() {
      this.id = this.$route.params.order_id
	  this.guan_al = this.utils.ossUrl + '/assets/img/guan_image.jpg';
	  this.fen_al = this.utils.ossUrl + '/assets/img/fen_image.jpg';
	  this.look_al1 = this.utils.ossUrl + '/assets/img/look_image1.jpg';
	  this.look_al2 = this.utils.ossUrl + '/assets/img/look_image2.jpg';
      this.init();
    },
    methods: {
      init: function() {
        Record.fnGetRecordDetail({order_id: this.id, isToken: true}).then(data => {
          if (data && data.status) {
              this.good = data.data;
			  if (this.good.guan_image) {
				  this.guan_image = this.good.guan_image
				  this.guan_file = ''
			  }
			  if (this.good.fen_image) {
					this.fen_image = this.good.fen_image
					this.fen_file = ''
			  }
			  if (this.good.look_image1) {
					this.look_image1 = this.good.look_image1
					this.look_file1 = ''
			  }
			  if (this.good.look_image2) {
				this.look_image2 = this.good.look_image2
				this.look_file2 = ''
			  }
              this.comment = {
                show: false,
                order_id: this.id,
                comment_img : this.utils.ossUrl + '/uploads/image/comment_image.png',
                bag_img : this.utils.ossUrl + '/uploads/image/bao_image.png',
                bag_background: this.good.bao_image,
                comment_background: this.good.comment_image,
                type: 'confirm',
                time: this.good.confirmtime ? this.good.confirmtime : '',
                bag_background_file: '',
                comment_background_file: ''
              }
              if ((this.good.status == 4 || this.good.status == 10) && this.good.zhi_pingurl != '') {
                  this.product.comment_pics = this.good.zhi_pingurl;
              }
              // if (this.good.status == 6 || this.good.status == 5) {
              //     this.product.comment_pics = [];
              //     this.product.comment_pics.push(this.good.bao_image);
              //     this.product.comment_pics.push(this.good.comment_image);
              // }
              if (this.good.status == 9) {
                  this.$dialog.alert({
                    message: '商家审核订单号无效，理由：'+(this.good.wrongwarn ? this.good.wrongwarn : '无')+''
                  }).then(() => {
                    // this.back()
                  });
              }
          }
        })
    },
    // 预览图片
    fnPreview: function(path) {
      var arr = [];
      if (Array.isArray(path)) {
        arr = path
      } else {
        arr = [path]
      }
      this.utils.fnPreviewPic(arr)
    },
    // 取消订单
    fnCancel: function() {
      this.$dialog.confirm({
        message: '确定取消申请?',
      }).then(() => {
        this.fnOrderUpdate('cancel')
      })
      .catch(() => {
        // on cancel
      });
    },
    // 操作订单
    fnOrderUpdate: function(type, ordernum, bao_image, comment_image) {
        var param = {};
        switch (type) {
            case 'cancel':
                param = {
                    type: type,
                    order_id: this.id,
                    isToken: true
                }
				Record.fnOrderUpdate(param).then(data => {
				  if (data) {
				      this.utils.fnMsg(data.msg)
				      if (data.status) {
						var vm = this;
						  setTimeout(function() {
							  vm.back()
						  }, 2000)
				      }
				  }
				})
            break;
            case 'ordernum':
				// api
				let param = new FormData() // 创建form对象
				let _param = {
				  type: type,
				  order_id: this.id,
				  ordernum: ordernum,
				  guan_image: this.guan_file,
				  fen_image: this.fen_file,
				  look_image1: this.look_file1,
				  look_image2: this.look_file2
				}
				for (var i in _param) {
				  param.append(i, _param[i]) // 添加form表单中其他数据
				}
				Record.fnOrderUpdateOrderNum(param).then(data => {
				  if (data) {
				      this.utils.fnMsg(data.msg)
				      if (data.status) {
				        var vm = this;
				          setTimeout(function() {
				             vm.init()
				          }, 2000)
				      }
				  }
				})
            break;
        }
    },
    // 换个关键词
    fnChangeKeyWord: function() {
      Record.fnChangeKeyword({goods_id: this.good.goods_id, keyword: this.good.keyword.key, isToken: true}).then(data => {
        if (data) {
            if (data.status) {
                this.good.keyword = data.data;
            }
        }
      })
    },
    fnCheck:function(type) {
		this.check.type = type;
		switch(type) {
			case 1:
				this.check.title = "填写要核对的店铺名";
				this.check.name = '店铺名'
				this.check.show = true;
			break;
			case 2:
				if (!this.guan_file && this.good.is_guan == 1 && !this.good.guan_image) {
					this.utils.fnMsg('请上传关注截图');
					return false;
				} else if (!this.fen_file && this.good.is_fen == 1 && !this.good.fen_image) {
					this.utils.fnMsg('请上传粉丝截图');
					return false;
				}else if ((!this.look_file1 || !this.look_file2) && this.good.timelook) {
					this.utils.fnMsg('请上传浏览截图');
					return false;
				} else {
					if (this.good.ordernum) this.check.input = this.good.ordernum;
					this.check.title = "填写订单号";
					this.check.name = '订单号'
					this.check.show = true;
				} 
			break;
		}
    },
    fnCheckConfirm: function() {
      switch(this.check.type) {
        case 1:
			if (!this.check.input) {
				this.utils.fnMsg('请填写要核对的店铺名')
				return false
			} else {
				this.fnCheckShop()
			}
			break;
        case 2:
			if (!this.check.input) {
				this.utils.fnMsg('请填写订单号')
				return false
			} else {
				this.fnOrderUpdate('ordernum', this.check.input);
			} 
        break;
      }
    },
    // 核对店铺名
    fnCheckShop: function() {
      Record.fnCheckShopName({goods_id: this.good.goods_id, storename: this.check.input, isToken: true}).then(res => {
        if (res) {
          this.utils.fnMsg(res.msg)
          if (res.status) {
            this.good.storename = this.check.input;
            this.check.input = ''
          } else {
            this.check.input = ''
          }
        }
      })
    },
    // 复制
    fnCopyText: function(el) {
      let vm = this;
      let clipboard = new this.clipboard(el);
      clipboard.on('success', function () {
        vm.utils.fnMsg("复制成功")
      });
      clipboard.on('error', function () {
        vm.utils.fnMsg("复制失败")
      });
    },
	afterRead(file) {
	    //判断图片的大小，单位是字节
	    if (file.file.size > 2 * 1024 *1024) {
	        let vm = this;
	        this.utils.fnChangeFile(file, {w: 200, h : 300}, function(res) {
			  vm.fnUpload(res)
	        })
	    } else {
	        // 符合大小的，直接上传
	        this.fnUpload(file)
	    }
	},
    fnUpload: function(file) {
      if (file) {
        switch (this.comment.image_type) {
            case 'bag':
              this.comment.bag_background_file = file.file;
              this.comment.bag_background = file.content;
            break;
            case 'comment':
                this.comment.comment_background_file = file.file;
                this.comment.comment_background = file.content;
            break
			case 'guan':
			    this.guan_file = file.file;
			    this.guan_image = file.content;
				if (this.good.is_guan == 1 && this.good.guan_image) {
					this.fnOrderUpdate('ordernum', this.good.ordernum);
				}
			break
			case 'fen':
			    this.fen_file = file.file;
			    this.fen_image = file.content;
				if (this.good.is_fen == 1 && this.good.fen_image) {
					this.fnOrderUpdate('ordernum', this.good.ordernum);
				}
			break
			case 'look1':
			    this.look_file1 = file.file;
			    this.look_image1 = file.content;
				if (this.good.timelook == 1 && this.good.look_image1) {
					this.fnOrderUpdate('ordernum', this.good.ordernum);
				}
			break
			case 'look2':
			    this.look_file2 = file.file;
			    this.look_image2 = file.content;
				if (this.good.timelook == 1 && this.good.look_image2) {
					this.fnOrderUpdate('ordernum', this.good.ordernum);
				}
			break
        }
      }
    },
    fnConfirmComment: function() {
      if (!this.comment.bag_background) {
          this.utils.fnMsg('请上传包裹拍摄图');
          return false;
      } else if (!this.comment.comment_background) {
          this.utils.fnMsg('请上传评价截图');
          return false;
      } else {
          // api
          let param = new FormData() // 创建form对象
          let _param = {
            order_id: this.comment.order_id,
            type: 'confirm',
            bao_image: this.comment.bag_background_file,
            comment_image: this.comment.comment_background_file
          }
          for (var i in _param) {
            param.append(i, _param[i]) // 添加form表单中其他数据
          }
          Record.fnUploadComment(param).then(data => {
            if (data) {
                this.utils.fnMsg(data.msg)
                if (data.status) {
                  var vm = this;
                    setTimeout(function() {
                       vm.comment.show = false;
                       vm.init()
                    }, 2000)
                }
            }
          })
      }
    },
    fnOpenRecord: function() {
      this.utils.fnOpenCommon(this, {name: 'sy_cz_record', params: {order_id: this.id}})
    }
    }
  }
</script>

<style scoped>
  .van-count-down {
    color: var(--pink)!important;
    display: inline-block!important;
  }
  table td{
    display:block;
    width:400px!important;
    overflow-x: hidden;
    white-space:pre-wrap;
    white-space:-moz-pre-wrap;
    white-space:-pre-wrap;
    white-space:-o-pre-wrap;
    word-wrap:break-word!important;
    min-height: 100px;
}
  div.check input {
      border: 1px solid #eee;
      border-radius: 3px;
      height: 40px;
      line-height: 40px;
      width: 100%;
      margin: auto;
  }
  .sy_detail .good_t {
    padding: 10px;
  }
  .sy_detail .good_t .good-img {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
    margin: 0;
    padding-bottom: 100%;
    /* 关键就在这里 */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .sy_detail .good_t .good_cont .name {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
  .sy_detail .good_t .good_cont .name img {
    width: 18px!important;
    height: 18px!important;
  }
  .sy_detail .good_t .sq_btn {
    width: 100px;
    height: 25px;
    line-height: 25px;
    border-radius: 20px;
    border: 1px solid #777;
  }
  .sy_detail .good_t .passed {
    border-color: var(--pink)!important;
  }
  .sy_detail .no_sk {
    padding: 30px 15px;
  }
  .sy_detail .sk_pass .item .change_btn {
    padding: 3px 5px;
    border-radius: 3px;
    background-color: #FF9933;
  }
  .sy_detail .img-list {
	  width: 90px!important;
	  height: 160px!important;
  }
  .sy_detail .img-list .img {
    width: 90px!important;
    height: 160px!important;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }
  .sy_detail .img-list:nth-child(odd) {
    margin-right: 5px;
  }
  .sy_detail .img-list:nth-child(even) {
    margin-left: 5px;
  }
  .sy_detail .pj .input {
    height: 40px;
    line-height: 40px;
    border-radius: 4px;
    padding-left: 10px;
    border: 1px solid var(--pink);
  }
  .sy_detail .pj .input input {
    height: 34px;
    line-height: 40px;
    border: 0;
	background-color: transparent!important;
	max-width: 95%!important;
  }
  .sy_detail .pj .input .btn {
    height: 40px;
    line-height: 40px;
    border-radius: 0 4px 4px 0;
  }
  .sy_detail table td {
    display: block;
    width: 400px!important;
    overflow-x: hidden;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word !important;
    min-height: 100px;
  }
  .sy_detail .tag_cont {
    overflow-x: hidden;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word !important;
  }
  .fixed {
    z-index: 1100;
  }
  .fixed .content {
    height: 50px;
    line-height: 50px;
  }
  .fixed .content .btn {
    height: 50px;
    line-height: 50px;
    border-radius: 0;
  }
  .fixed .content .lt {
    background-color: #444;
    padding-left: 20px;
  }
  .fixed .content .time_btn {
    background-color: #000;
  }

  .van-popup--center {
    right: 20px!important;
    left: 20px!important;
    border-radius: 4px!important;
    margin: auto;
    -webkit-transform: translateY(-50%)!important;
       -moz-transform: translateY(-50%)!important;
        -ms-transform: translateY(-50%)!important;
         -o-transform: translateY(-50%)!important;
            transform: translateY(-50%)!important;
  }

  div.sy_comment div.content {
    padding: 20px 24px;
  }
  div.sy_comment .img_cont {
    width: 100px;
    height: 150px;
    line-height: 150px;
    background-color: #f2f2f2;
    margin: auto;
  }

  div.sy_comment .img_cont .img {
    width: 100px;
    height: 150px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  div.sy_comment div.img_b div.img {
    height: 60px;
    width: 40px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: auto;
  }
  div.sy_comment div.content div.tags {
    line-height: 22px;
    padding: 20px 0;
  }
  div.sy_comment div.btn {
    height: 40px;
    line-height: 40px;
    border-radius: 0 0 0 4px;
  }
  div.sy_comment div.close_btn {
    border-radius: 0 0 4px 0;
  }
  
    .hbsj .img_cont {
		width: 104px;
		height: 150px;
		line-height: 150px;
		background-color: #f2f2f2;
		margin: auto;
	}

	.hbsj .img_cont .img {
		width: 104px;
		height: 150px;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
	}
</style>
